@extends('home.layout.base')
<link rel="stylesheet" href="{{URL::asset('./css/activity/details.css')}}">

@section('content')
<div class="main">
    <div class="main" id="actdetails" v-cloak>
        <div class="details_left">
            <div class="details_left_header">
                <img :src="detailsData.thumb">
                <div class="details_left_headerDiv">
                    <span class="detailsTitle" :title="detailsData.title">
                        @{{detailsData.title}}
                    </span>
                    <div class="detailStatu">
                        <p class="cateStatu" :class="{active : detailsData.act_state=='报名中'}">@{{detailsData.act_state}}</p>
                        <div class="end_at" :class="{active : detailsData.act_state=='报名中'}">报名截止 @{{detailsData.enroll_at}}，如想参加，请尽快报名</div>
                    </div>
                    <div class="detailPrice">
                        <p class="text">报名费用</p>
                        <p v-if="detailsData.cost!=0.00" class="text1">￥@{{detailsData.cost}}</p>
                        <p v-else class="price">免费</p>
                    </div>
                    <div class="detailsMain">
                        <p class="text">主办方</p>
                        <p class="text1">@{{detailsData.sponsor}}</p>
                    </div>
                    <div class="detailsMain">
                        <p class="text">活动地点</p>
                        <p class="text1">@{{detailsData.place}}</p>
                    </div>
                    <p class="detailLine"></p>
                    <div class="detailBm">
                        <button @click="checkLogin" v-if="detailsData.is_act == 1">
                            在线报名
                        </button>
                        <button v-else style="background:#ddd">
                            在线报名
                        </button>
                        <p class="text">剩余名额@{{detailsData.limit - detailsData.number || 0}}人，已报名@{{detailsData.number}}人</p>
                    </div>
                </div>
            </div>
            <div class="details_left_main">
                <div class='leftMainTitle'>
                    <span>活动信息</span>
                </div>
                <div class="leftMainTable">
                    <!-- <table style="width:100%">
                            <tr class='cc'>
                                <td class='th'>
                                    <img src="{{URL::asset('./img/icon/sponsorGray.png')}}">
                                    主办方
                                </td>
                                <td>@{{detailsData.sponsor}}</td>
                                <td class='th'>
                                    <img src="{{URL::asset('./img/icon/monyGray.png')}}">
                                    活动费用
                                </td>
                                <td style="white-space: nowrap;">@{{detailsData.cost}}元</td>
                            </tr>
                            <tr>
                                <td class='th'>
                                    <img src="{{URL::asset('./img/icon/timeGray.png')}}">
                                    活动时间
                                </td>
                                <td>@{{detailsData.start_at}}</td>
                                <td class='th'>
                                    <img src="{{URL::asset('./img/icon/timeGray.png')}}">
                                    报名截止
                                </td>
                                <td style="white-space: nowrap;"> @{{detailsData.enroll_at}}</td>
                            </tr>
                            <tr class='cc'>
                                <td class='th'>
                                    <img src="{{URL::asset('./img/icon/classifyGray.png')}}">
                                    活动分类
                                </td>
                                <td>@{{detailsData.cate_pid?detailsData.cate_pid.name:''}} — @{{detailsData.cate_id?detailsData.cate_id.name:''}}</td>
                                <td class='th'>
                                    <img src="{{URL::asset('./img/icon/childGray.png')}}">
                                    参加人数
                                </td>
                                <td>@{{detailsData.number}}人</td>
                            </tr>
                            <tr>
                                <td class='th'>
                                    <img src="{{URL::asset('./img/icon/adderGray.png')}}">
                                    活动地点
                                </td>
                                <td>@{{detailsData.place}}</td>
                                <td class='th'>
                                    <img src="{{URL::asset('./img/icon/stateGray.png')}}">
                                    活动状态
                                </td>
                                <td>@{{detailsData.act_state}}</td>
                            </tr>
                        </table> -->
                    <div class="text_box">
                        <p class="text1">主办方</p>
                        <p class="text">@{{detailsData.sponsor}}</p>
                    </div>
                    <div class="text_box">
                        <p class="text1">活动时间</p>
                        {{--@{{detailsData.start_at}} -- @{{detailsData.end_at}}--}}
                        <p class="text">@{{time1}} -- @{{time2}}</p>
                    </div>
                    <div class="text_box">
                        <p class="text1">报名截止</p>
                        <p class="text">@{{detailsData.enroll_at}}</p>
                    </div>
                    <div class="text_box">
                        <p class="text1">活动费用</p>
                        <p class="text" v-if="detailsData.cost!=0.00">@{{detailsData.cost}}元</p>
                        <p class="text" v-else>免费</p>
                    </div>
                    <div class="text_box">
                        <p class="text1">活动分类</p>
                        <p class="text">@{{detailsData.cate_pid?detailsData.cate_pid.name:''}} — @{{detailsData.cate_id?detailsData.cate_id.name:''}}</p>
                    </div>
                    <div class="text_box">
                        <p class="text1">人数上限</p>
                        <p class="text">@{{detailsData.limit}}</p>
                    </div>
                    <div class="text_box">
                        <p class="text1">活动地点</p>
                        <p class="text">@{{detailsData.place}}</p>
                    </div>
                    <div class="text_box">
                        <p class="text1">活动状态</p>
                        <p class="text">@{{detailsData.act_state}}</p>
                    </div>
                </div>
                <!-- <div class='leftMainTitle'>
                        <span>活动日程</span>
                    </div>
                    <div class='leftMainFooter'>
                        <p>时间：6月12日9:00-16:30（9:00-9:15 签到）</p>
                        <p>
                            费用：3000元/人，含午餐
                        </p>
                    </div> -->
            </div>
            <div class="details_left_main" style="margin-top:20px">
                <div class='leftMainTitle'>
                    <span>活动介绍</span>
                </div>
                <div class="leftMainTable" style="text-indent:20px;">
                    @{{detailsData.content}}

                    {{--<img :src="item" style="width: 100%;height: auto;" v-for="item in detailsData.images">--}}
                    <div v-for="item in detailsImages">
                        <img :src="item" style="width: 100%;height: auto;">
                    </div>
                </div>
            </div>
        </div>
        <div class="details_right">
            <div class="detialsRightStore">
                <div class='detialsRightTitle' v-if="detailsData.source==2">
                    <img src="{{URL::asset('./img/icon/sponsor.png')}}">
                    该活动发布供应商
                </div>
                <div class='detialsRightTitle' v-else>
                    <img src="{{URL::asset('./img/icon/sponsor.png')}}">
                    该活动由平台发布
                </div>
                <div class='detialsRightMain' v-if="detailsData.source==2">
                    <div class="detialsRightMain_store">
                        <img :src="detailsDataStore.logo">
                        <div class="storeDetails">
                            <div class="stote_title">
                                <p class="text">@{{detailsDataStore.store_name}}</p>
                                <img v-if="detailsDataStore.quality==2" src="{{URL::asset('./img/icon/attention.png')}}">
                                <img v-if="detailsDataStore.hot==2" src="{{URL::asset('./img/icon/hot.png')}}">
                            </div>
                            <p class="sc" style="text-align: left;font-size:12px;color:#999;margin-top:12px">擅长领域</p>
                            <div class="sc_box" v-if="detailsDataStore.cate_id">
                                <p class="sc_text" v-for="(item,index) in detailsDataStore.cate_id" :key="index" v-if="index<4">@{{item.name}}</p>
                            </div>
                            <div class="lb_box">
                                <p class="text">浏览 @{{detailsDataStore.view || 0}}</p>
                                <p class="text">来电咨询 @{{detailsDataStore.call}}</p>
                                <p class="text">好评 @{{detailsDataStore.credit}}%</p>
                            </div>
                            <div class="colletBox">
                            {{--<p class="storeCollect" @click="setCollect(detailsDataStore.id)" :class="{active:detailsDataStore.store_collect==2}">--}}
                                    {{--<span v-if="detailsDataStore.store_collect==1">--}}
                                        {{--<img src="{{URL::asset('./img/store/storeCollectFalse.png')}}" alt="">收藏服务商--}}
                                    {{--</span>--}}
                                    {{--<span v-if="detailsDataStore.store_collect==2">--}}
                                        {{--已收藏--}}
                                    {{--</span>--}}
                                    {{--<span class="storeCollectNum">@{{detailsDataStore.collections}}</span>--}}
                                {{--</p>--}}

                                <button style="width: 115px;
    height: 36px;
    background: rgba(255,255,255,1);
    border: 1px solid rgba(255,165,49,1);
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color: #FFA531;" @click="window.location.href = '{{ route('home.store.store') }}?id='+detailsDataStore.id">
                                    进入店铺
                                </button>
                                <p class="area">地址:@{{detailsDataStore.area}}</p>
                            </div>

                            <!-- <p class="addrS">
                                <img src="{{URL::asset('./img/icon/addr.png')}}">
                                @{{detailsDataStore.area_info}}
                            </p> -->
                            <!-- <p class="detialsss">
                                <span>
                                    <img src="{{URL::asset('./img/icon/telmini.png')}}">
                                    @{{detailsDataStore.call}}
                                </span>
                                <span style="color:#999999">
                                    <img src="{{URL::asset('./img/icon/praise.png')}}">
                                    @{{detailsDataStore.credit}}%
                                </span>
                            </p> -->
                        </div>
                    </div>
                    <!-- <div class="goodAt" v-if="detailsDataStore.cate_id">
                        <a>
                            <img src="{{URL::asset('./img/icon/sponsor.png')}}">
                            擅长领域：
                        </a>
                        <span>@{{detailsDataStore.cate_id[0]?detailsDataStore.cate_id[0].name:''}}</span>
                        <span>企业管理咨询</span>
                    </div> -->
                </div>
                <div class="detialsRightMain_1" v-else>
                    <img :src="detailsDataStore.logo">
                    <p>@{{detailsDataStore.name}}</p>
                    {{--<span>该活动由平台主办</span>--}}
                </div>
            </div>
            <div class='detailsRightMain'>
                <div class='detialsRightTitle'>
                    <img src="{{URL::asset('./img/icon/recommend.png')}}">
                    该类型推荐活动
                </div>
                <div class="stroreListDetails" v-for="(item,index) in RightHotAct" @click=" window.location.href = '{{ route('home.activity.actDetails') }}?cateId='+item.id+'&cid='+cid">
                    <img :src="item.thumb">
                    <div>
                        <span>@{{item.title}}</span>
                        <p class="text">报名截止：@{{item.enroll_at.substring(0,10)}}</p>
                        <p class="text">活动地址：@{{item.place}}</p>
                        <!-- <div>
                            <p class="stroreListDetailsP">
                                <span>
                                    <img src="{{URL::asset('./img/icon/eyered.png')}}">
                                    @{{item.view}}
                                </span>
                                <span>
                                    <img src="{{URL::asset('./img/icon/childred.png')}}">
                                    @{{item.limit}}人
                                </span>
                            </p>
                            <p class="stroreListDetailsP">
                                <span>
                                    <img src="{{URL::asset('./img/icon/monyred.png')}}">
                                    ￥@{{item.cost}}
                                </span>
                                <span>
                                    <img src="{{URL::asset('./img/icon/timered.png')}}">
                                    @{{item.start_at}}
                                </span>
                            </p>
                        </div> -->
                    </div>
                    <!-- <button @click=" window.location.href = '{{ route('home.activity.actDetails') }}?cateId='+item.id+'&cid='+cid">报名</button> -->
                </div>
            </div>
        </div>
    </div>
</div>

@endsection
@section('scripts')
<script>
    $(() => {
        let app = new Vue({
            el: '#actdetails',
            data: () => {
                return {
                    caseId: getQueryString("cateId"),
                    cid: getQueryString("cid") || '',
                    detailsData: {},
                    detailsDataStore: {},
                    RightHotAct: [],
                    userType: "",
                    time1:'',
                    time2:'',
                    detailsImages:[],
                }
            },
            created() {
                this.getDetails();
                let dataCid = {
                    cid: this.cid
                }
                apiAjax("{{ route('home.activity.detailsRightHotActApi')}}", 'get', dataCid, (res) => {
                    if (res.code == 0) {
                        this.RightHotAct = res.data;
                    } else {
                        this.$message({
                            message: res.msg,
                            type: 'warning'
                        });
                    }
                }, (erro) => {

                });
            },
            mounted() {},
            methods: {
                getDetails() {
                    let data = {
                        id: this.caseId
                    }
                    apiAjax("{{ route('home.activity.actDetailsApi')}}", 'get', data, (res) => {
                        if (res.code == 0) {
                            this.detailsData = res.data;
                            this.detailsDataStore = res.data.store;
                            this.time1=res.data.enroll_at.substring(0,16),
                            this.time2=res.data.end_at.substring(0,16)
                            for(var i=0;i<res.data.images.length;i++){
                                this.detailsImages.push(res.data.images[i].url);
                                // console.log(this.detailsImages)
                            }
                        } else {
                            this.$message({
                                message: res.msg,
                                type: 'warning'
                            });
                        }
                    }, (erro) => {

                    });
                },
                setCollect(storeId) {
                    let data = {
                        collect_id: storeId
                    }
                    apiAjax("{{ route('home.store.storeCollectApi')}}", 'post', data, (res) => {
                        if (res.code == 0) {
                            this.$message({
                                message: res.msg,
                                type: 'success'
                            });
                            this.getDetails()
                        } else {
                            this.$message({
                                message: res.msg,
                                type: 'warning'
                            });
                        }
                    }, (erro) => {

                    });
                },
                //报名验证登录
                checkLogin() {

                    let data = {}
                    apiAjax("{{ route('home.public.checkLogin')}}", 'get', data, (res) => {
                        if (res.code == 0) {
                            sessionStorage.setItem("loginBool", false)
                            if (sessionStorage.getItem("HRuserDetails")) {
                                if (sessionStorage.getItem("HRuserDetails").type == 2) {
                                    this.$message({
                                        message: "请登录HR用户账号",
                                        type: 'warning'
                                    });
                                } else {
                                    sessionStorage.setItem("applyBool", true);
                                }
                            } else {
                                sessionStorage.setItem("loginBool", true)
                            }
                        } else {
                            sessionStorage.setItem("loginBool", true)
                        }
                    }, (erro) => {

                    });
                    // window.location.href = '{{ route('home.activity.actPay') }}'
                }
            }
        })
    })
</script>
@endsection